<template>
  <div class="information-detail">
    <h3>{{ title }}</h3>
    <el-form ref="formRef" :model="form" :rules="formRules" label-width="100px" :disabled="disabled">
      <el-form-item prop="title" label="标题">
        <el-input v-model="form.title" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item prop="classify_id" label="分类">
        <el-select v-model="form.classify_id" placeholder="请选择">
          <el-option v-for="item in classifyOptions" :key="item.id" :label="item.name" :value="String(item.id)">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="thumbnail" label="缩略图">
        <Imglist @updataImg="updataImg" :limit="3" :value="thumbnail"></Imglist>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item prop="content" label="内容">
        <editor @getTxt="getTxt" :value="form.content" :disabled="disabled" :heightMultiple="1.2" :height="'600'"></editor>
      </el-form-item>
      <el-form-item prop="sort" label="序号">
        <el-input-number v-model="form.sort" :min="0" :step="1" :precision="0"></el-input-number>
      </el-form-item>
      <el-form-item prop="publisher" label="发布者">
        <el-input v-model="form.publisher" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item prop="" label="推荐商品">
        <el-button type="primary" @click="openSelectGoodsOrShop('goods')">选择商品</el-button>
        <el-table :data="goodsList" border style="width: 100%">
          <el-table-column align="center" label="序号">
            <template slot-scope="{$index}">
              <div>
                {{ $index + (params.page - 1) * params.limit + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="商品图片">
            <template slot-scope="scope">
              <el-popover placement="top-start" trigger="hover">
                <a :href="scope.row.cover" target="_blank" title="查看最大化图片"><img :src="scope.row.cover" style="width: 300px;height: 300px" /></a>
                <img slot="reference" :src="scope.row.cover" @click="$openImg(scope.row.cover)" style="width: 50px;height: 50px; cursor:pointer" />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" label="商品名称" prop="title"></el-table-column>
          <el-table-column align="center" label="所属店铺" prop="shop_name"></el-table-column>
          <el-table-column align="center" label="价格" prop="min_sale_price"></el-table-column>
          <el-table-column align="center" label="实际销量" prop="real_sale_num"></el-table-column>
          <el-table-column align="center" label="贡献值" prop="consumption_value"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="{row}">
              <div>
                <el-button type="text" @click="look('goods', row.id)">查看</el-button>
                <el-button type="text" @click="remove('goods', row.id)">移除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item prop="" label="推荐联盟店铺">
        <el-button type="primary" @click="openSelectGoodsOrShop('shop')">选择门店</el-button>
        <el-table :data="shopList" border style="width: 100%">
          <el-table-column align="center" label="序号" width="80">
            <template slot-scope="{$index}">
              <div>
                {{ $index + (params.page - 1) * params.limit + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="店铺名称" prop="shop_name"></el-table-column>
          <el-table-column align="center" label="店铺所在区域">
            <template slot-scope="{row}">
              <div>
                {{ row.province_name + row.city_name + row.area_name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="店铺地址" prop="address"></el-table-column>
          <el-table-column align="center" label="售后电话" prop="customer_service_phone"></el-table-column>
          <el-table-column align="center" label="法人" prop="legal_representative"></el-table-column>
          <el-table-column align="center" label="法人手机号" prop="lr_mobile"></el-table-column>
          <el-table-column align="center" label="入驻时间" prop="create_time"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="{row}">
              <div>
                <el-button type="text" @click="look('shop', row.id)">查看</el-button>
                <el-button type="text" @click="remove('shop', row.id)">移除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <div class="footer">
      <el-button @click="goBack">返回</el-button>
      <el-button type="primary" @click="submintHandle" v-if="type != 'look'">确认</el-button>
    </div>

    <!-- 选择商品、联盟店铺弹窗 -->
    <selectGoodsShop ref="selectGoodsShop" :selectType="selectType" :idList="idList" @selectGoodsOrShop="selectGoodsOrShop"
      @lookGoodsOrShopDetail="lookGoodsOrShopDetail" v-if="showGoodsShop">
    </selectGoodsShop>

    <!-- 查看商品 -->
    <productList-look v-if="dialogVisibleLook" ref="productLook"></productList-look>

    <!--查看店铺-->
    <merchant-details v-if="shopDetails" ref="merchantDetails"></merchant-details>
  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js';
import editor from '@/components/editor';
import Imglist from './../oss/oss-uploadImg2';
import selectGoodsShop from './select-goods-shop';
import productListLook from './../platform/product/productList-look.vue';
import merchantDetails from './../shop/merchant-details.vue';
export default {
  components: {
    editor,
    Imglist,
    selectGoodsShop,
    productListLook,
    merchantDetails
  },
  data () {
    return {
      id: '',
      type: '',
      title: '新增咨询',
      disabled: false,
      form: {},
      classifyOptions: [],
      thumbnail: [], // 编辑商品图片
      dialogVisible: false,
      dialogVisibleLook: false,
      shopDetails: false,
      dialogImageUrl: '',
      goodsList: [],
      shopList: [],
      recommend_goods: [],
      recommend_shops: [],
      totalPage: 0,
      recommendGoods: [],
      recommendShops: [],
      idList: [],
      params: {
        page: 1,
        limit: 10,
        shop_name: '',
      },
      showGoodsShop: false,
      selectType: '',
      formRules: {
        title: { required: true, message: '标题不能为空', tigger: 'blur' },
        classify_id: { required: true, message: '分类不能为空', tigger: 'blur' },
        content: { required: true, message: '内容不能为空', tigger: 'blur' },
        sort: { required: true, message: '序号不能为空', trigger: 'blur' },
        publisher: { required: true, message: '发布者不能为空', tigger: 'blur' }
      }
    }
  },
  created () {
    this.getClassifyList()
    this.type = this.$route.query.type
    this.id = this.$route.query.id
    if (this.type == 'look') {
      this.title = '资讯详情'
      this.disabled = true
    } else if (this.type == 'add') {
      this.title = '新增资讯'
      this.disabled = false
    } else if (this.type == 'edit') {
      this.title = '编辑资讯'
      this.disabled = false
    }
    if (this.id) {
      this.getDetail()
    }
  },
  methods: {
    // 获取资讯详情
    getDetail () {
      seviceApi.getInformationInfo(this.id).then(res => {
        if (res && res.data.code == 200) {
          this.$nextTick(() => {
            this.form = res.data.data
            this.form.classify_id = String(res.data.data.classify_id)
            this.thumbnail = res.data.data.thumbnail || []
            this.goodsList = res.data.data.recommend_goods_list || []
            this.recommend_goods = res.data.data.recommend_goods || []
            this.shopList = res.data.data.recommend_shop_list || []
            this.recommend_shops = res.data.data.recommend_shops || []
          })
        }
      })
    },
    // 获取分类列表
    getClassifyList () {
      seviceApi.getInformationClassifyListOption().then(res => {
        if (res && res.data.code == 200) {
          this.classifyOptions = res.data.list
        }
      })
    },

    // 编辑器
    getTxt (e) {
      this.form.content = e
    },
    // 上传图片
    updataImg (e) {
      this.thumbnail = e
      this.form.thumbnail = e
    },
    openSelectGoodsOrShop (selectType) {
      this.showGoodsShop = true
      this.selectType = selectType
      if (selectType == 'goods') {
        this.idList = this.recommend_goods
      } else if (selectType == 'shop') {
        this.idList = this.recommend_shops
      }
      this.$nextTick(() => {
        this.$refs.selectGoodsShop.open()
      })
    },
    lookGoodsOrShopDetail (arg) {
      this.look(arg.type, arg.id)
    },
    selectGoodsOrShop (list) {
      if (this.selectType == 'goods') {
        this.goodsList = [...this.goodsList, ...list]
        this.recommend_goods = this.arrId(this.goodsList)
      } else if (this.selectType == 'shop') {
        this.shopList = [...this.shopList, ...list]
        this.recommend_shops = this.arrId(this.shopList)
      }
    },
    // 重组数组id
    arrId (list) {
      let arr = []
      if (list.length > 0) {
        for (let item of list) [
          arr.push(item.id)
        ]
      }
      return arr
    },
    recombineArrID (list, id) {
      return list.filter(item => item !== id)
    },
    // 重组显示数组
    showList (list, id) {
      return list.filter(item => item.id !== id)
    },
    look (t, id) {
      if (t == 'goods') {
        this.dialogVisibleLook = true
        this.$nextTick(() => {
          this.$refs.productLook.init(id)
        })
      } else if (t == 'shop') {
        this.shopDetails = true
        this.$nextTick(() => {
          this.$refs.merchantDetails.init(id, 1)
        })
      }
    },
    result () {
      this.dialogVisibleLook = false
    },
    remove (t, id) {
      if (t == 'goods') {
        this.goodsList = this.showList(this.goodsList, id)
        // this.recommend_goods = this.arrId(this.goodsList)
        this.recommend_goods = this.recombineArrID(this.recommend_goods, id)
      } else if (t == 'shop') {
        this.shopList = this.showList(this.shopList, id)
        // this.recommend_shops = this.arrId(this.shopList, id)
        this.recommend_shops = this.recombineArrID(this.recommend_shops, id)
      }
    },
    goBack () {
      this.$router.back()
    },
    submintHandle () {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.form.recommend_goods = this.recommend_goods
          this.form.recommend_shops = this.recommend_shops
          if (this.type == 'add') {
            seviceApi.informationAdd(this.form).then(res => {
              if (res && res.data.code == 200) {
                this.$message.success('保存成功')
                this.goBack()
              }
            })
          } else if (this.type == 'edit') {
            seviceApi.informationEdit(this.form).then(res => {
              if (res && res.data.code == 200) {
                this.$message.success('编辑成功')
                this.goBack()
              }
            })
          }
        } else {
          return false
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.information-detail {
  .el-form {

    .el-select,
    .el-input {
      width: 500px;
    }

    /deep/ .el-card {
      height: auto !important;
    }

    .el-table {
      margin-top: 20px;
    }
  }

  .footer {
    padding-left: 100px;
  }
}
</style>